<template>
  <div class="main-content">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="content-breadcrumb">
      <el-breadcrumb-item :to="{ path: '/cage-manage' }">
        笼子列表
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{ pageTitle }}</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 头部搜索 -->
    <el-card class="box-card">
      <el-button type="success" class="add-btn" @click="addPet">
        新增成员
      </el-button>
    </el-card>
    <!-- 中间表格 -->
    <el-card class="content-card">
      <div class="cage-content">
        <!-- 表格及分页器 -->
        <TemplateTable
          class="table-box"
          :tableData="tableData"
          :columns="columns"
          :pageNum="pageNum"
          :pageSize="pageSize"
          :total="pageTotal"
          @currentPageChange="currentChange"
          @pageSizeChange="handleSizeChange"
        >
          <template #petImg="{ row }">
            <el-image
              class="petImg"
              :src="row.url"
              :preview-src-list="[row.url]"
            >
            </el-image>
          </template>
          <template #sex="{ row }">
            {{ row.sex == 0 ? "未知" : row.sex == 1 ? "公" : "母" }}
          </template>
          <template #operation="{ row }">
            <!-- <el-button
              @click="handleDetail(row)"
              type="success"
              size="small"
              round
              icon="el-icon-view"
              >详情</el-button
            > -->
            <el-button
              type="warning"
              size="small"
              round
              icon="el-icon-edit"
              @click="handleEdit(row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              round
              icon="el-icon-delete"
              @click="handleDelete(row)"
              >删除</el-button
            >
          </template>
        </TemplateTable>
      </div>
    </el-card>

    <!-- 新增宠物弹窗 -->
    <EditPet
      ref="editForm"
      :addPetDialog.sync="addPetDialog"
      :dialogTitle="dialogTitle"
      @loadData="init"
    ></EditPet>
  </div>
</template>
<script>
import TemplateTable from "@/components/template-table"
import EditPet from "@/components/edit-pet-dialog"
import commonMixin from "./mixins/common.js"

export default {
  name: "cage-detail",
  mixins: [commonMixin],
  components: {
    TemplateTable,
    EditPet
  },
  data() {
    return {
      pageTitle: "笼子详情",
      cageId: "",
      yardId: 1,
      pageNum: 1,
      pageSize: 10,
      pageTotal: 0,
      tableData: [],
      addPetDialog: false,
      dialogTitle: "" //对话框标题
    }
  },
  mounted() {
    this.cageId = this.$route.query.cageNum
    this.init()
  },
  methods: {
    init() {
      this.pageNum = 1
      this.pageSize = 10
      this.loadData()
    },
    currentChange(pageNum) {
      this.pageNum = pageNum
      this.loadData()
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.loadData()
    },
    search() {
      this.pageNum = 1
      this.loadData()
    },
    //当前院子的某个笼子中的狗狗列表
    async loadData() {
      let params = {
        cageId: this.cageId,
        yardId: this.yardId,
        pageNumber: this.pageNum,
        pageSize: this.pageSize
      }
      try {
        let res = await this.$http.get("/dog-manage/find-dogs", params)
        this.tableData = res.data.content
        this.pageTotal = res.data.totalElements
      } catch (err) {
        console.log("报错了：", err)
      }
    },
    //由狗狗id获取该狗狗信息
    searchOneDog(id) {
      let params = {
        id: id
      }
      return new Promise((resolve, reject) => {
        this.$http
          .get("/dog-manage/searchOneDog", params)
          .then(res => {
            let nerArr
            if (res.data.dogImgList.length > 0) {
              nerArr = res.data.dogImgList.map(el => el.url)
            }
            res.data.dog["pictures"] = nerArr
            resolve(res)
          })
          .catch(err => {
            reject(err)
          })
      })
    },
    //编辑狗狗
    async handleEdit(row) {
      const res = await this.searchOneDog(row.id)
      this.addPetDialog = true
      this.dialogTitle = "编辑狗狗"
      this.$nextTick(() => {
        this.$refs.editForm.petForm = JSON.parse(JSON.stringify(res.data.dog))
        this.$refs.editForm.fileList = JSON.parse(
          JSON.stringify(res.data.dogImgList)
        )
      })
    },
    //查看详情
    async handleDetail(row) {
      this.$router.push({
        path: "/cage-manage/cage-detail/dogDetail",
        query: {
          id: row.id
        }
      })
    },
    //删除狗狗
    handleDelete(row) {
      const that = this
      that
        .$confirm("此操作将从系统中永久删除该狗狗。是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          let params = {
            dogId: row.id
          }
          that.$http
            .delete("/dog-manage/deleteOneDog", params)
            .then(res => {
              if (res.code === 0) {
                that.$message({
                  message: "删除狗狗成功",
                  type: "success"
                })
                that.loadData()
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除"
          })
        })
    },
    //增加狗狗信息
    addPet() {
      this.addPetDialog = true
      this.dialogTitle = "新增狗狗"
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-top: 30px;
}
.content-card {
  margin-top: 30px;
  .petImg {
    width: 100px;
    height: 100%;
  }
}
</style>
